/*******************************************
 * 
 * Plug-in:友好的页面加载效果
 * Author:sqinyang (sqinyang@sina.com)
 * Time:2015/04/20
 * Explanation:随着HTML5的流行，页面效果越来越炫，同时也需要加载大量的插件及素材，万恶的网速，特别对于挂在国外服务器的网站，一打开一堆素材缓缓加载，位置错乱不齐，故编写此方法，方便大家使用
 *
*********************************************/
jQuery.bootstrapLoading = {
  start: function (options) {
    var defaults = {
      opacity: 1,
      //loading页面透明度
      backgroundColor: "#fff",
      //loading页面背景色
      borderColor: "#bbb",
      //提示边框颜色
      borderWidth: 1,
      //提示边框宽度
      borderStyle: "solid",
      //提示边框样式
      loadingTips: "Loading, please wait...",
      //提示文本
      TipsColor: "#666",
      //提示颜色
      delayTime: 1000,
      //页面加载完成后，加载页面渐出速度
      zindex: 999,
      //loading页面层次
      sleep: 0
      //设置挂起,等于0时则无需挂起
    }
    var options = $.extend(defaults, options);
    //获取页面宽高
    var _PageHeight = document.documentElement.clientHeight,
    _PageWidth = document.documentElement.clientWidth;
    //在页面未加载完毕之前显示的loading Html自定义内容
    var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:' + _PageHeight + 'px;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: auto;border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; height:80px; line-height:80px; padding-left:80px; padding-right: 5px;border-radius:10px; background: ' + options.backgroundColor + ' url(img/loading.gif) no-repeat 5px center; color:' + options.TipsColor + ';font-size:20px;">' + options.loadingTips + '</div></div>';
    //呈现loading效果
    $("body").append(_LoadingHtml);
    //获取loading提示框宽高
    var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
    _LoadingTipsW = document.getElementById("loadingTips").clientWidth;
    //计算距离，让loading提示框保持在屏幕上下左右居中
    var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
    _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;
    $("#loadingTips").css({
      "left": _LoadingLeft + "px",
      "top": _LoadingTop + "px"
    });
    //监听页面加载状态
    document.onreadystatechange = PageLoaded;
    //当页面加载完成后执行
    function PageLoaded() {
      if (document.readyState == "complete") {
        var loadingMask = $('#loadingPage');
        setTimeout(function () {
          loadingMask.animate({
            "opacity": 0
          },
          options.delayTime,
          function () {
            $(this).hide();
          });
        },
        options.sleep);
      }
    }
  },
  end: function () {
    $("#loadingPage").remove();
  }
}